<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>心率折线图</title>
  <link rel="stylesheet" href="../css/曲线图.css">
</head>

<body>
  <div class="card">
    <h1 class="chart-title">心率折线图</h1>
    <div class="chart-container">
      <canvas id="heartRateChart"></canvas>
    </div>
    <div class="chart-info">
      平均心率: <span class="bpm-value">72</span> BPM
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const canvas = document.getElementById('heartRateChart');
      const ctx = canvas.getContext('2d');
      const bpmDisplay = document.querySelector('.bpm-value');

      // 设置canvas的实际尺寸（解决Retina屏幕模糊问题）
      function setupCanvas() {
        const rect = canvas.getBoundingClientRect();
        canvas.width = rect.width * window.devicePixelRatio;
        canvas.height = rect.height * window.devicePixelRatio;
        ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
      }

      // 窗口大小改变时重新调整canvas
      window.addEventListener('resize', function () {
        setupCanvas();
        drawStaticHeartRate();
      });

      // 绘制静态心率折线图
      function drawStaticHeartRate() {
        const width = canvas.getBoundingClientRect().width;
        const height = canvas.getBoundingClientRect().height;

        // 清除画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制背景网格
        drawGrid(width, height);

        // 生成心率数据点
        const dataPoints = generateHeartRateData(width, height);

        // 计算平均心率
        const avgBPM = calculateAverageBPM(dataPoints, height);
        bpmDisplay.textContent = avgBPM;

        // 绘制折线
        drawLineChart(dataPoints, width, height);

        // 绘制数据点标记
        drawDataPoints(dataPoints);
      }

      // 绘制网格背景
      function drawGrid(width, height) {
        ctx.strokeStyle = '#e0e0e0';
        ctx.lineWidth = 1;

        // 水平网格线
        const horizontalLines = 10;
        for (let i = 0; i <= horizontalLines; i++) {
          const y = (height / horizontalLines) * i;
          ctx.beginPath();
          ctx.moveTo(0, y);
          ctx.lineTo(width, y);
          ctx.stroke();

          // 绘制Y轴刻度标签 (BPM值)
          if (i > 0 && i < horizontalLines) {
            const bpmValue = mapYToBPM(y, height);
            ctx.fillStyle = '#999';
            ctx.font = '10px Arial';
            ctx.textAlign = 'right';
            ctx.fillText(bpmValue + ' BPM', -5, y);
          }
        }

        // 垂直网格线
        const verticalLines = 20;
        for (let i = 0; i <= verticalLines; i++) {
          const x = (width / verticalLines) * i;
          ctx.beginPath();
          ctx.moveTo(x, 0);
          ctx.lineTo(x, height);
          ctx.stroke();
        }
      }

      // 生成心率数据
      function generateHeartRateData(width, height) {
        const points = [];
        const centerY = height / 2;
        const pointCount = 50;
        const step = width / pointCount;

        for (let i = 0; i < pointCount; i++) {
          const x = i * step;
          let y;

          // 模拟心率波动模式
          if (i > 10 && i < 20) {
            // 心跳上升
            y = centerY - 40 + Math.random() * 10;
          } else if (i > 20 && i < 30) {
            // 心跳下降
            y = centerY + 30 - Math.random() * 10;
          } else if (i > 35 && i < 45) {
            // 第二次心跳
            y = centerY - 35 + Math.random() * 8;
          } else if (i > 45 && i < 55) {
            // 第二次下降
            y = centerY + 25 - Math.random() * 8;
          } else {
            // 基线波动
            y = centerY + (Math.random() * 15 - 7.5);
          }

          points.push({ x, y });
        }

        return points;
      }

      // 绘制折线图
      function drawLineChart(points, width, height) {
        ctx.strokeStyle = '#e74c3c';
        ctx.lineWidth = 2;
        ctx.beginPath();

        points.forEach((point, index) => {
          if (index === 0) {
            ctx.moveTo(point.x, point.y);
          } else {
            ctx.lineTo(point.x, point.y);
          }
        });

        ctx.stroke();
      }

      // 绘制数据点标记
      function drawDataPoints(points) {
        ctx.fillStyle = '#e74c3c';

        // 每隔5个点绘制一个标记点
        points.forEach((point, index) => {
          if (index % 5 === 0) {
            ctx.beginPath();
            ctx.arc(point.x, point.y, 4, 0, Math.PI * 2);
            ctx.fill();

            // 白色内圆
            ctx.fillStyle = 'white';
            ctx.beginPath();
            ctx.arc(point.x, point.y, 2, 0, Math.PI * 2);
            ctx.fill();

            ctx.fillStyle = '#e74c3c';
          }
        });
      }

      // 将Y坐标映射为BPM值
      function mapYToBPM(y, height) {
        // 假设Y轴范围对应40-120 BPM
        const minBPM = 40;
        const maxBPM = 120;
        return Math.round(maxBPM - ((y / height) * (maxBPM - minBPM)));
      }

      // 计算平均心率
      function calculateAverageBPM(points, height) {
        let total = 0;
        points.forEach(point => {
          total += mapYToBPM(point.y, height);
        });
        return Math.round(total / points.length);
      }

      // 初始化
      setupCanvas();
      drawStaticHeartRate();
    });
  </script>
</body>

</html>